<template>
	<view class="x-box" :style=" {...setCustomStyle,...customStyle}  ">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			testBorder: {
				type: Boolean,
				default: false
			},
			border:{
				type: Boolean,
				default: false
			},
			padding: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: 'initial',
			},
			width: {
				type: String,
				value: '100%',
			},
			radius: {
				type: String,
				value: '100%'
			},
			bgColor: {
				type: String,
				value: '#fff'
			},
			margin: {
				type: String,
				default: ''
			},
			customStyle: {
				type: Object,
				value: ()=>{}
			}
		},
		data() {
			return {

			};
		},
		computed: {
			setCustomStyle() {
				var customStyle = {
					"padding": this.padding,
					"height": this.height,
					"width": this.width,
					"margin": this.margin,
					"border-radius": this.radius,
					"background-color": this.bgColor
				}
				
				if(this.border) {
					Reflect.set(customStyle,'border',this.border);
					return customStyle;
				}
				
				if (this.testBorder)
					Reflect.set(customStyle,'border','1rpx dashed #ff6600');
				return customStyle;
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';
</style>
